<template>
  <el-form :model="form" :inline="true">
    <el-form-item label="监测区间">
      <span style="display: flex">
      <el-input v-model="form.before"/><span style="margin-left: 5px">%</span>
        </span>
    </el-form-item>
    <el-form-item>
       <span style="display: flex">
      <el-input v-model="form.after"/><span style="margin-left: 5px">%</span>
        </span>
    </el-form-item>
    <el-form-item>
      <el-button type="primary">修改</el-button>
    </el-form-item>
  </el-form>
  <div style="background-color: #ffffff">
    <div ref="BarECharts" style="width: 100%;height: 450px"></div>
  </div>

</template>
<script setup>
import {onMounted, reactive, ref} from "vue";
import * as echarts from 'echarts';

const form = reactive({
  before: 20,
  after: -60
})

const BarECharts = ref(null)
onMounted(() => {
  const colors = ['#73deb3', '#788ab0', '#f67b38', '#6dc8ec', '#9270ca', '#fa8c16', '#b37feb', '#ff0000']
  if (BarECharts.value) {
    const Echarts = echarts.init(BarECharts.value);
    const option = {
      tooltip: {
        trigger: 'axis',
      },
      grid: {
        top: '50',
        right: '50',
        left: '50',
        bottom: '50'
      },
      xAxis: [{
        type: 'category',
        data: ['2024-01', '2024-02', '2024-03', '2024-04'],
        axisLine: {
          lineStyle: {
            color: '#DCE2E8'
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,
          textStyle: {
            color: 'rgba(51, 51, 51, 1)'
          },
          fontSize: 12,
        },
        boundaryGap: true
      }],
      yAxis: [{
        name: '',
        axisTick: {
          show: false
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          textStyle: {
            color: 'rgba(51, 51, 51, 0.58)'
          },
          formatter: '{value}'
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(0, 0, 0, 0.15)'
          }
        }
      }, {
        type: 'value',
        position: 'right',
        name: '',
        axisTick: {
          show: false
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          textStyle: {
            color: 'rgba(51, 51, 51, 0.58)'
          },
          formatter: '{value}'
        },
        splitLine: {
          show: false
        }
      }],
      series: [{
        name: '',
        type: 'line',
        data: [10, -12, 3, 9],
        symbolSize: 1,
        symbol: 'circle',
        smooth: true,
        yAxisIndex: 0,
        showSymbol: false,
        itemStyle: {
          normal: {
            lineStyle: {
              width: 3,
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: 'rgba(255, 203, 88, 1)'
              },
                {
                  offset: 1,
                  color: 'rgba(255, 56, 90, 1)'
                }
              ])
            },
            areaStyle: {
              opacity: 0.6,//透明度
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(255, 203, 88, 1)'
              },
                {
                  offset: 1,
                  color: 'rgba(158,135,255,0)'
                }
              ])
            }
          }
        }
      }, {
        type: 'bar',
        yAxisIndex: 1,
        data: [100, 500, 248, 362],
        barMaxWidth: '22px', // 柱子的醉倒宽度
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: 'rgba(255, 56, 90, 1)'
            },
              {
                offset: 1,
                color: 'rgba(255, 203, 88, 1)'
              }
            ])
          }
        },
        label: {
          normal: {
            show: true,
            lineHeight: 30,
            formatter: '{c}',
            position: 'top',
            textStyle: {
              color: 'rgba(51, 51, 51, 1)',
              fontSize: 12,
              fontWeight: 700,
              fontFamily: 'DINAlternate-Bold, DINAlternate'
            }
          }
        }
      }]
    };
    Echarts.setOption(option);
    window.onresize = Echarts.resize
  }
})
</script>


<style scoped lang="scss">
</style>

